<script setup lang="ts">
import {markRaw, onMounted, ref} from "vue"
import type {EChartsOption, EChartsType} from "echarts"
import * as echarts from "echarts";
import {useGetSankeyDataApi} from "@/api"
import type {Sankey} from "@/interface";

const sankey = ref()
const option = ref<EChartsOption>()
const myChart = ref<EChartsType>()
const sankeyData = ref<Sankey>({
  data: [],
  link:[]
})
const init = async () => {
  const {data: res} = await useGetSankeyDataApi()
  sankeyData.value = res
  myChart.value = markRaw(echarts.init(sankey.value));
  draw();
}
const draw = () => {
  option.value = {
    title: [
      {
        left: 'center',
        text: '各类型职位是否热门与工作地点桑基图',
        textStyle:{
          color:'#000000'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    animation: false,
    series: [
      {
        type: 'sankey',
        left: 50.0,
        top: 20.0,
        right: 150.0,
        bottom: 25.0,
        emphasis: {
          focus: 'adjacency'
        },
        data: sankeyData.value.data,
        links: sankeyData.value.link,
        label: {
          color: 'rgba(0,0,0,0.7)',
          fontFamily: 'Arial',
          fontSize: 12
        },
        lineStyle: {
          color: 'source',
          curveness: 0.5
        }
      }
    ]
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="sankey" class="sankey">
  </div>
</template>

<style scoped>
.sankey {
  width: 100%;
  height: 100%;
}
</style>